<link rel="stylesheet" type="text/css" href="<?= base_url( 'static/webuploader/webuploader.css' ); ?>"/>
<link rel="stylesheet" type="text/css" href="<?= base_url( 'static/webuploader/demo.css' ); ?>"/>



<div id="post-container" class="container">
    <div class="page-container">
        <h1 id="demo">Demo</h1>

        <p>您可以尝试文件拖拽，使用QQ截屏工具，然后激活窗口后粘贴，或者点击添加图片按钮</p>

        <div id="uploader" style="width:400px;height: 200px;">
            <!--<div class="queueList">
                <div id="dndArea" class="placeholder" style="">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>
            </div>
            <ul class="filelist">
                <li id="WU_FILE_5">
                    <p class="title">eieieieie.jpg</p>
                    <p class="imgWrap">
                        <img src=""/>
                    </p>
                    <p class="progress">
                        <span></span>
                    </p>
                    <div class="file-panel">
                        <span class="cancel">删除</span>
                        <span class="rotateRight">向右旋转</span>
                        <span class="rotateLeft">向左旋转</span>
                    </div>
                </li>
            </ul>-->
            <div class="queueList filled">
                <div id="dndArea" class="placeholder" style="">
                    <div id="filePicker"></div>
                    <p>或将照片拖到这里，单次最多可选300张</p>
                </div>

            </div>


            <div class="statusBar">
                <div class="progress">
                    <span class="text">0%</span>
                    <span class="percentage"></span>
                </div>
                <div class="info"></div>
                <div class="btns">
                    <div id="filePicker2"></div>
                    <div class="uploadBtn">开始上传</div>
                </div>
            </div>
        </div>

        <div id="uploader-demo">
            <!--用来存放item-->
            <div id="fileList" class="uploader-list"></div>
            <div id="filePicker">选择图片</div>
        </div>

    </div>
</div>
<script>
    var BASE_URL="<?= base_url( 'static/webuploader' ); ?>";
</script>
<script type="text/javascript" src="<?= base_url( 'static/webuploader/webuploader.js' ); ?>"></script>
<script type="text/javascript" src="<?= base_url( 'static/webuploader/demo.js' ); ?>"></script>
<script>
    var uploader = WebUploader.create({

        // 选完文件后，是否自动上传。
        auto: true,

        // swf文件路径
        swf: BASE_URL + '/js/Uploader.swf',

        // 文件接收服务端。
        server: 'http://webuploader.duapp.com/server/fileupload.php',

        // 选择文件的按钮。可选。
        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
        pick: '#filePicker',

        // 只允许选择图片文件。
        accept: {
            title: 'Images',
            extensions: 'gif,jpg,jpeg,bmp,png',
            mimeTypes: 'image/*'
        }
    });
</script>